<!--
 * @Author: your name
 * @Date: 2022-03-05 01:07:10
 * @LastEditTime: 2022-03-05 14:05:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\components\Previewimg\Previewimg.vue
-->
<!--
  作者：张月红
  主要维护者： 陈立兰
-->
<template>
  <div>
    <div class="img-show-list" v-show="uploadImgsPreview.length > 0">
      <div
        :style="{ width: previewType === 'file' ? '100%' : '' }"
        v-for="(item, index) in uploadImgsPreview"
        :key="index + 'pre'"
      >
        <!-- <img :src="item" alt="" @click.stop="handlePictureCardPreview(item)" /> -->
        <div class="img-show-item" v-if="previewType === 'img'">
          <el-image
            class="imgStyle"
            fit="cover"
            :src="item"
            :preview-src-list="uploadImgsPreview"
          >
          </el-image>
          <div class="mask-1000-index" v-if="showIcon">
            <el-popconfirm
              title="您确定要删除该照片么？"
              icon="el-icon-info"
              icon-color="red"
              cancel-button-type="default"
              @confirm="handleDelete(index, item)"
            >
              <el-button
                slot="reference"
                icon="el-icon-error"
                type="text"
                class="closeBtn"
              ></el-button>
            </el-popconfirm>
            <!-- <img src="@/assets/home/close_icon.png" alt="" /> -->
          </div>
        </div>

        <div class="show-file-box" v-if="previewType === 'file'">
          <span>{{ item.name }}</span>
          <!-- 上传成功icon -->
          <el-button
            type="text"
            icon="el-icon-circle-check"
            class="success-icon"
          ></el-button>

          <div class="operation-icon-box">
            <!-- 下载按钮 -->
            <el-button
              type="text"
              icon="el-icon-download"
              class="btn-icon"
              v-if="isShowDownloadBtn"
              @click="handleDownload(item)"
            >
            </el-button>
            <!-- 删除按钮 -->
            <el-button
              type="text"
              icon="el-icon-delete"
              class="btn-icon btn-del-icon"
              v-if="isShowDeleteBtn"
              @click="handleDelete(index, item.id)"
            >
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog> -->
  </div>
</template>

<script>
import { deleteFile } from '@/api/file'
export default {
  props: {
    // 显示文件列表
    uploadImgsPreview: {
      type: Array,
      default: () => []
    },
    // 是否显示图片的删除按钮
    showIcon: {
      type: Boolean,
      default: true
    },
    // 显示的类型： 纯图片img | 文件类型 file
    previewType: {
      type: String,
      default: 'img'
    },
    // 是否显示文件下载按钮
    isShowDownloadBtn: {
      type: Boolean,
      default: true
    },
    // 是否显示文件删除
    isShowDeleteBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      delImgId: []
    }
  },
  methods: {
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file
      this.dialogVisible = true
    },
    handleDelete(index, url) {
      let fileId = ''
      if (this.previewType === 'img') {
        // 图片时候只传了一个url，所以截取id出来
        const idIndex = url.lastIndexOf('/')
        fileId = url.slice(idIndex + 1)
      } else {
        // 文件传的是对象，可以直接拿id
        fileId = url
      }
      this.delImgId.push(fileId)
      // console.log("删除图片===", index, fileId);
      this.$emit('deleteImg', index)
    },
    delImgFunc() {
      console.log('遍历===', this.delImgId)
      return new Promise((resolve, reject) => {
        if (this.delImgId.length === 0) {
          const returnMsg = { code: 200, message: '没有需要删除的文件' }
          resolve(returnMsg)
        }
        let promiseList = []
        this.delImgId.forEach((item) => {
          promiseList.push(deleteFile(item))
        })
        Promise.all(promiseList)
          .then((res) => {
            console.log('删除成功===', res)
            resolve(res)
          })
          .catch((err) => {
            console.log('删除失败===', err)
            reject(err)
          })
      })
    },
    handleDownload(file) {
      console.log('下载文件===', file)
      this.$message.info('暂未支持下载')
      // downloadFile(file.id, file.name).then(res => {
      //   console.log('下载文件成功===', res)
      // }).catch(err => {
      //   console.log('下载文件err===', err)
      // })
    }
  }
}
</script>

<!--
  阮中楠增加一个scoped样式作用域，试图解决全局样式污染的问题。
  在测试环境中，该组件的样式被全局样式所修改。可能是缺乏了局部样式作用域的修饰。
-->
<style lang="scss" scoped>
.img-show-list {
  display: inline-flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.img-show-item {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 5px 15px 5px 0;
  border: 1px solid #f6f6f6;
  border-radius: 5px;
  overflow: hidden;
  .imgStyle {
    width: 100%;
    height: 100%;
  }
}

.mask-1000-index {
  position: absolute;
  top: -3px;
  right: 3px;
  width: 22px;
  height: 22px;
  color: #fff;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-content: center;
}

.closeBtn {
  font-size: 20px;
  color: grey;

  &:hover {
    color: #f56c6c;
  }
}

.show-file-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  width: 100%;
  color: #606266;

  &:hover {
    background-color: #f2f2f2;
    border-radius: 2px;
    .success-icon {
      display: none;
    }
    .operation-icon-box {
      display: inline-block;
    }
  }
}
.success-icon {
  color: #67c23a;
}
.operation-icon-box {
  display: none;
  .btn-icon {
    margin: 0 3px;
  }
  .btn-del-icon {
    color: #f56c6c;
  }
}
</style>
